import React from 'react';
import { Modal, Form, Input, Select, InputNumber, Upload, Switch, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { SYSTEM } from '@/types/system';

const { TextArea } = Input;
const { Option } = Select;

interface AchievementFormProps {
  visible: boolean;
  onCancel: () => void;
  onSubmit: (values: any) => void;
  initialValues?: SYSTEM.AchievementModel;
  loading?: boolean;
}

const AchievementForm: React.FC<AchievementFormProps> = ({
  visible,
  onCancel,
  onSubmit,
  initialValues,
  loading = false,
}) => {
  const [form] = Form.useForm();

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      onSubmit(values);
    } catch (error) {
      message.error('请检查表单输入');
    }
  };

  return (
    <Modal
      title={initialValues ? '编辑成就' : '新增成就'}
      open={visible}
      onCancel={onCancel}
      onOk={handleSubmit}
      confirmLoading={loading}
      width={600}
      destroyOnClose
    >
      <Form
        form={form}
        layout="vertical"
        initialValues={initialValues}
      >
        <Form.Item
          name="name"
          label="成就名称"
          rules={[{ required: true, message: '请输入成就名称' }]}
        >
          <Input placeholder="请输入成就名称" />
        </Form.Item>

        <Form.Item
          name="description"
          label="成就描述"
          rules={[{ required: true, message: '请输入成就描述' }]}
        >
          <TextArea rows={3} placeholder="请输入成就描述" />
        </Form.Item>

        <Form.Item
          name="type"
          label="成就类型"
          rules={[{ required: true, message: '请选择成就类型' }]}
        >
          <Select placeholder="请选择成就类型">
            <Option value="learning">学习成就</Option>
            <Option value="activity">活动成就</Option>
            <Option value="social">社交成就</Option>
            <Option value="special">特殊成就</Option>
          </Select>
        </Form.Item>

        <Form.Item
          name="category"
          label="成就分类"
          rules={[{ required: true, message: '请选择成就分类' }]}
        >
          <Select placeholder="请选择成就分类">
            <Option value="bronze">青铜</Option>
            <Option value="silver">白银</Option>
            <Option value="gold">黄金</Option>
            <Option value="platinum">铂金</Option>
            <Option value="diamond">钻石</Option>
          </Select>
        </Form.Item>

        <Form.Item
          name="points"
          label="奖励积分"
          rules={[{ required: true, message: '请输入奖励积分' }]}
        >
          <InputNumber min={0} placeholder="请输入奖励积分" style={{ width: '100%' }} />
        </Form.Item>

        <Form.Item
          name="condition_type"
          label="达成条件类型"
          rules={[{ required: true, message: '请选择达成条件类型' }]}
        >
          <Select placeholder="请选择达成条件类型">
            <Option value="course_completion">课程完成</Option>
            <Option value="study_time">学习时长</Option>
            <Option value="login_days">登录天数</Option>
            <Option value="score">分数达成</Option>
            <Option value="activity_participation">活动参与</Option>
          </Select>
        </Form.Item>

        <Form.Item
          name="condition_value"
          label="达成条件值"
          rules={[{ required: true, message: '请输入达成条件值' }]}
        >
          <InputNumber min={0} placeholder="请输入达成条件值" style={{ width: '100%' }} />
        </Form.Item>

        <Form.Item
          name="icon_url"
          label="成就图标"
        >
          <Upload
            name="file"
            listType="picture"
            maxCount={1}
            beforeUpload={() => false}
          >
            <button type="button">
              <UploadOutlined /> 上传图标
            </button>
          </Upload>
        </Form.Item>

        <Form.Item
          name="is_active"
          label="是否启用"
          valuePropName="checked"
        >
          <Switch />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default AchievementForm;
